<template>
  <div class="container">
    <div v-if="!selectWidgetFlag && selectWidget && propsConfig[selectWidget.type]" class="props-config scroll">
      <!-- <el-scrollbar class="scroll-container"> -->
      <el-form ref="propFromRef" :model="selectWidget" class="props-scrollbar-form" label-position="top">
        <template v-for="(prop, index) in handelProps(propsConfig[selectWidget.type], selectWidget.type)">
          <!-- <div :key="`${prop.type}${index}`">{{ prop }}</div> -->
          <!-- <el-form-item v-if="!isSubFormAuth(prop) && inputProps(prop)" :class="{'other-setting-item': prop.type === 'otherSetting', 'is-required':prop.type === 'linkForm' || (prop.formBind && prop.formBind.isRequired)}" :key="`${prop.type}${index}`" :label="prop.label" :prop="prop.parentkey?`${prop.parentkey}.${prop.key}`:prop.key" v-bind="prop.formBind"> -->
          <el-form-item v-if="!isSubFormAuth(prop) && inputProps(prop)" :class="{'other-setting-item': ['otherSetting', 'titleOtherSetting'].includes(prop.type), 'is-required':prop.type === 'linkForm' || (prop.formBind && prop.formBind.isRequired)}" :key="`${prop.type}${index}`" :label="prop.label" :prop="prop.parentkey?`${prop.parentkey}.${prop.key}`:prop.key" v-bind="prop.formBind">
            <div v-if="prop.propTip" slot="label" class="flex-center">{{ prop.label }}<tipIcon :content="prop.propTip" /></div>
            <template v-if="prop.type === 'input'">
              <el-input v-if="prop.parentkey" :disabled="prop.key === 'maxlength' && isNumberType(selectWidget)" v-model="selectWidget[prop.parentkey][prop.key]" v-bind="prop.bind" class="width240" size="small" @input="statusCheck" @change="inputChange(prop, $event)" />
              <el-input v-else v-model="selectWidget[prop.key]" v-bind="prop.bind" class="width240" size="small" @input="statusCheck" @change="inputChange(prop, $event)" />
              <div v-if="prop.bottomTip" class="bottom-tip">{{ prop.bottomTip }}</div>
            </template>
            <template v-else-if="prop.type === 'inputDefault'">
              <el-input
                v-model="selectWidget[prop.key]"
                :maxlength="selectWidget.options.maxlength"
                :type="selectWidget.options.dataType"
                class="width240"
                size="small"
                @change="numberInputChange(selectWidget)" />
            </template>
            <template v-else-if="prop.type === 'inputDefaultGroup'">
              <selectWithoutHttp
                v-model="selectWidget.options.defaultType"
                :list-data="[{id: 0, value: '自定义'},{id: 1, value: '预设多个值'}]"
                class="width240"
                style="margin-bottom: 10px;"
                @change="changeSelect(prop, $event)" />
              <SelectGroup
                v-if="selectWidget.options.defaultType === 1"
                v-model="selectWidget"
                :multiple="false"
                v-bind="prop.bind"
                @statusCheck="statusCheck"
                @changeValue="inputValueChange(prop)" />
              <el-input
                v-else
                v-model="selectWidget[prop.key]"
                :maxlength="selectWidget.options.maxlength"
                :type="selectWidget.options.dataType"
                placeholder="输入默认值"
                class="width240"
                size="small"
                @change="numberInputChange(selectWidget)" />
              <div v-if="selectWidget.options.defaultType === 1" class="input-form-item">
                <div class="label">允许手动输入</div>
                <el-switch v-model="selectWidget.options.isCanEdit" @change="switchChange($event, prop)" />
              </div>
            </template>
            <template v-else-if="prop.type === 'select'">
              <selectWithoutHttp v-model="selectWidget[prop.parentkey][prop.key]" v-bind="prop.bind" class="width240" @change="changeSelect(prop, $event)" />
            </template>
            <template v-else-if="prop.type === 'statistics'">
              <selectWithoutHttp v-model="selectWidget[prop.parentkey][prop.key]" :list-data="statisticsList" multiple clearable label-name="name" key-name= "key" class="width240" @change="statisticsChange" />
            </template>
            <el-row v-else-if="prop.type === 'otherSetting' && prop.config" >
              <template v-for="(config, jindex) in prop.config" >
                <el-col v-if="config.key !== 'isCondition' || (config.key === 'isCondition' && !selectWidget.isSubTable)" :span="12" :key="jindex">
                  <el-checkbox v-model="selectWidget.options[config.key]" :disabled="setDisabled(config, selectWidget)" @change="changeSetting($event, config)">
                    <span :style="{fontWeight: selectWidget.options[config.key] ? 'bold' : ''}" class="flex-center">
                      {{ config.name }}<tipIcon v-if="config.tip" :content="config.tip" max-width="180px"/>
                    </span>
                  </el-checkbox>
                </el-col>
              </template>
            </el-row>
            <el-row v-else-if="prop.type === 'titleOtherSetting' && prop.config" >
              <template v-for="(config, jindex) in prop.config" >
                <el-col :span="24" :key="jindex">
                  <el-checkbox v-if="config.type === 'checkbox'" v-model="selectWidget.options[config.key]" @change="changeSetting($event, config, selectWidget.options)">
                    {{ config.name }}
                  </el-checkbox>
                  <el-input v-if="config.type === 'input' && selectWidget.options.requireTitleRemark" v-model="selectWidget.options[config.key]" :placeholder="config.placeholder" :maxlength="config.maxlength" size="small" class="width240" />
                  <el-select v-if="config.type === 'select' && selectWidget.options.requireTitleRemark" v-model="selectWidget.options[config.key]" class="width240 mb10" size="small" placeholder="请选择">
                    <el-option
                      v-for="ele in config.options"
                      :key="ele.value"
                      :label="ele.label"
                      :value="ele.value"
                    />
                  </el-select>
                </el-col>
              </template>
            </el-row>
            <div v-else-if="prop.type === 'inputNumber'">
              <el-input-number
                v-model="selectWidget.options[prop.key]"
                v-bind="prop.bind"
                controls-position="right"
                class="width240 input-number"
                size="small"
                @change="inputNumberChange(prop)"
              />
              <el-checkbox v-if="selectWidget.type === 'input' && prop.key === 'precision'" v-model="selectWidget.options.isShowPercentage">展示百分比</el-checkbox>
            </div>
            <SelectGroup v-else-if="prop.type === 'selectGroup'" :multiple="selectWidget.type === 'select'?selectWidget.options.multiple:prop.bind?prop.bind.multiple:false" v-bind="prop.bind" v-model="selectWidget" @statusCheck="statusCheck" />
            <LinkFormProp v-else-if="prop.type === 'linkForm'" :widget-data="widgetData" v-model="selectWidget" @statusCheck="statusCheck" />
            <LinkFormPresetFilter v-else-if="prop.type === 'presetFilter'" :widget-data="widgetData" v-model="selectWidget" />
            <BanAssociatedProps v-else-if="prop.type === 'banAssociated'" v-model="selectWidget" />
            <PostSelectProps v-else-if="prop.type === 'postSelect'" :widget-data="widgetData" v-model="selectWidget" />
            <DepartmentDefaultProp v-else-if="prop.type === 'departmentDefault'" v-model="selectWidget" :widget-data="widgetData" />
            <UserDefault v-else-if="prop.type === 'userDefault'" v-model="selectWidget" :widget-data="widgetData" />
            <AutoStorage v-else-if="prop.type === 'autoStorage'" v-model="selectWidget" :widget-data="widgetData" @handelChangeValue="handelChangeValue" />
            <template v-else-if="prop.type === 'switch'">
              <el-switch v-if="prop.parentkey" v-model="selectWidget[prop.parentkey][prop.key]" @change="switchChange($event, prop)" />
              <el-switch v-else v-model="selectWidget[prop.key]" @change="switchChange($event, prop)" />
            </template>
            <template v-else-if="prop.type === 'secret'">
              <el-switch :disabled="!selectWidget._isNew || selectWidget.options.contentCache" v-model="selectWidget.options.isSecret" />
              <div v-if="selectWidget.options.isSecret" >
                <el-checkbox v-model="selectWidget.options.createShowValue">创建人及当前节点审批人展示解密结果</el-checkbox>
              </div>
            </template>
            <template v-else-if="prop.type === 'radioButton'">
              <el-radio-group v-if="prop.parentkey" v-model="selectWidget[prop.parentkey][prop.key]" size="small">
                <el-radio-button v-for="item in prop.options" :key="item.id" :label="item.id">
                  {{ item.name }}
                </el-radio-button>
              </el-radio-group>
              <el-radio-group v-else v-model="selectWidget[prop.key]" size="small" @change="layoutChange">
                <el-radio-button v-for="item in prop.options" :key="item.id" :label="item.id">
                  {{ item.name }}
                </el-radio-button>
              </el-radio-group>
            </template>
            <NumberRange
              v-else-if="prop.type === 'numberRange'"
              v-model="selectWidget.options.numberRange"
              :max="99999999999"
              :min="-99999999999"
              start-placeholder="最低"
              end-placeholder="最高"
              clearable
              @onChange="numberRangeChange" />
            <SubformDefaultProp v-else-if="prop.type === 'subformDefaultValue'" v-model="selectWidget" :widget-data="widgetData" />
            <RichEditorDefaultProp v-else-if="prop.type === 'richEditorDefaultValue'" v-model="selectWidget" :widget-data="widgetData" />
            <FormulaProp v-else-if="prop.type === 'formula'" :form-options="widgetData" :key-to-formula="widgetData.config.keyToFormula" v-model="selectWidget" />
            <SwitchType v-else-if="prop.type === 'switchType'" v-model="selectWidget" />
            <RemarkInput v-else-if="prop.type === 'remarkInput'" v-model="selectWidget"/>
            <SelectSwitchType v-else-if="prop.type === 'selectSwitchType'" v-model="selectWidget"/>
          </el-form-item>
        </template>
      </el-form>
      <!-- </el-scrollbar> -->
    </div>
    <div v-else class="empty-container">
      <div class="img"><img :src="EmptyImg" alt=""></div>
      <div class="label">请添加字段</div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import EmptyImg from '@/assets/empty-table-data.png';
import { propsConfig } from '../config';
import SelectGroup from './selectGroup';
import LinkFormProp from './linkFormProp';
import LinkFormPresetFilter from './linkFormPresetFilter';
import BanAssociatedProps from './BanAssociatedProps';
import PostSelectProps from './PostSelectProps';
import SubformDefaultProp from './subformDefaultProp';
import RichEditorDefaultProp from './richEditorDefaultProp';
import DepartmentDefaultProp from './DepartmentDefaultProp';
import FormulaProp from './formulaProp';
import UserDefault from './UserDefault';
import AutoStorage from './AutoStorage';
import SwitchType from './switchType';
import SelectSwitchType from './SelectSwitchType';
import RemarkInput from './RemarkInput';

import selectWithoutHttp from '@/components/Common/selectWithoutHttp';
import { EventBus } from '@/utils/eventBus';
import NumberRange from '@/components/Tool/module/numberRange';
import { isNumberType } from '@/utils/formMakeUtils.js';
import { getMonthStr } from '@/utils';
import { setLinkStatistics } from '@/views/legal/process/mixins/linkFormUtils';
import { formulaChange } from '@/views/legal/process/components/formMake/utils/index.js';

export default {
  components: {
    selectWithoutHttp, SelectGroup, LinkFormProp, LinkFormPresetFilter,
    DepartmentDefaultProp, NumberRange, SubformDefaultProp, RichEditorDefaultProp,
    FormulaProp, BanAssociatedProps, PostSelectProps, UserDefault, AutoStorage, SwitchType,
    RemarkInput, SelectSwitchType
  },
  props: {
    widgetData: {
      type: Object,
      default: () => {
        return {
          list: [],
          config: {
            labelWidth: 100, labelPosition: 'right',
            keyToFormula: {} // 公式字段的映射表（被引用的字段: 引用它的公式字段）
          }
        };
      }
    }
  },
  data() {
    return {
      propsConfig, EmptyImg,
      selectWidgetFlag: false,
      defaultTimeArr: [],
      defaultUserArr: [],
      userListDate: []// 人员选择下拉数据
    };
  },
  computed: {
    ...mapState({
      'selectWidget': state => state.formMake.selectWidget,
      'userInfo': state => state.user.userInfo
    }),
    statisticsList() {
      const list = this.selectWidget.subform || [];
      const ans = [];
      list.forEach(i => {
        if (isNumberType(i)) {
          ans.push({ key: i.key, name: i.name });
        }
      });
      if (this.selectWidget.type === 'subform' && this.selectWidget.options && this.selectWidget.options.statistics) {
        this.filterStatistics(ans);
      }
      return ans;
    }
  },
  watch: {
    selectWidget: {
      handler(val) {
        if (val && val.options) {
          this.selectWidgetFlag = true;
          if (val.options.format === 'yyyy/MM') {
            this.handleDefaultTime([...this.defaultTimeArr, { value: 4, label: '默认获取上个月' }, { value: 5, label: '默认获取下个月' }]);
          } else {
            this.handleDefaultTime(this.defaultTimeArr);
          }
          if (!val.options.width) {
            const noWidth = ['switch', 'radio', 'checkbox', 'upAttachment', 'createUser', 'createTime', 'workflowId'];
            if (!noWidth.includes(val.type)) {
              this.$set(val.options, 'width', 240);
            }
          }
          this.$nextTick(() => {
            this.selectWidgetFlag = false;
          });
        }
      },
      immediate: true
    }
  },
  created() {
    this.init();
  },
  methods: {
    isNumberType,
    changeData() {
      this.$emit('changeData');
    },
    init() {
      if (propsConfig) {
        this.defaultTimeArr = Object.freeze(propsConfig.date[1].bind.listData);
        this.defaultUserArr = Object.freeze(propsConfig.user);
      }
    },
    handelProps(config, type) {
      let head = propsConfig.common.head || [];
      let foot = JSON.parse(JSON.stringify(propsConfig.common.foot)) || [];
      foot = foot.filter(i => {
        if (i.type === 'otherSetting') {
          i.config = (i.config || []).filter(j => {
            if (j.hide && j.hide.length) return !j.hide.includes(type);
            if (j.show && j.show.length) return j.show.includes(type);
            return true;
          });
        }
        if (i.hide && i.hide.length) return !i.hide.includes(type);
        if (i.show && i.show.length) return i.show.includes(type);
        return true;
      });
      // if (foot[0] && foot[0].config) {
      //   const config = JSON.parse(JSON.stringify(foot[0].config));
      //   foot[0].config = config.filter(j => {
      //     if (j.hide && j.hide.length) return !j.hide.includes(type);
      //     if (j.show && j.show.length) return j.show.includes(type);
      //     return true;
      //   });
      // }
      head = head.filter(i => {
        if (i.hide && i.hide.length) return !i.hide.includes(type);
        return true;
      });
      if (type === 'grid') return config;
      const ans = head.concat(config);
      if (this.selectWidget.isSubTable && this.selectWidget.options) {
        // 如果是子表单中的字段，增加详情页列宽度属性
        ans.push({ label: '详情页列宽度', parentkey: 'options', key: 'detailWidth',
          type: 'inputNumber', bind: { min: 0, max: 1156, step: 10, precision: 0 }
        });
      }
      return [...ans, ...foot];
    },
    handleDefaultTime(arr) {
      if (!arr) return;
      propsConfig.date.forEach(it => {
        if (it.key === 'isDefaultNowTime') {
          it.bind.listData = arr;
        }
      });
    },
    handelChangeValue(e) {
      this.selectWidget.options.isAutoStorage = e;
      if (!e) {
        this.selectWidget.options.storageMaxLength = null;
      }
    },
    changeSelect(prop, e) {
      if (prop.key === 'format') {
        const arr = e === 'yyyy/MM' ? [...this.defaultTimeArr, { value: 4, label: '默认获取上个月' }, { value: 5, label: '默认获取下个月' }] : this.defaultTimeArr;
        // 格式为年月默认值添加默认上下个月选项
        this.handleDefaultTime(arr);
      } else if (prop.key === 'isDefaultNowTime') {
        const currentMonth = new Date().valueOf();
        const { entryTime, dimissionTime } = this.userInfo;
        const userEntryTime = entryTime && entryTime * 1000 || null;
        const userResignTime = dimissionTime && dimissionTime * 1000 || null;
        const lastMonth = getMonthStr(-1);
        const nextMonth = getMonthStr(1);
        const dateMap = ['', currentMonth, userEntryTime, userResignTime, lastMonth, nextMonth];
        this.selectWidget.value = dateMap[e];
      } else if (this.selectWidget.type === 'input' && prop.key === 'dataType') {
        formulaChange('remove', this.widgetData, this.selectWidget);
        this.selectWidget.options.isShowPercentage = false;
        if (this.selectWidget.isSubTable && e !== 'number') {
          /**
           * 当子表单中的一个字段已经被设为统计字段是，需报错
           */
          const list = this.widgetData.list;
          const key = this.selectWidget.key;
          let isInStatistics = false;
          for (let i = 0; i < list.length; i++) {
            if (list[i].type === 'subform' && list[i].subform && list[i].options.statistics.length) {
              isInStatistics = list[i].options.statistics.includes(key);
            }
            if (isInStatistics) {
              break;
            }
          }
          if (isInStatistics) {
            this.selectWidget[prop.parentkey][prop.key] = 'number';
            this.$message.warning('该字段已被设为统计字段，请取消后再修改');
            return;
          }
        }
        const el = _.cloneDeep(this.selectWidget);
        if (e === 'number') {
          this.selectWidget.options.maxlength = 11;
          this.$store.dispatch('addWidget', { type: 'number', widget: el });
        } else {
          this.selectWidget.options.maxlength = 50;
          this.$store.dispatch('removeWidget', { type: 'number', widget: el });
        }
        EventBus.$emit('inputDataTypeChange', { element: _.cloneDeep(this.selectWidget) });
      } else if (prop.type === 'inputDefaultGroup' && e === 0) { // 默认值从预设值->自定义，清空预设值，否则会影响缓存字段显示
        this.$set(this.selectWidget.options, 'options', []);
      }
      if (this.selectWidget.type === 'input' && e === 'number') {
        this.selectWidget.value = 0;
      }
    },
    layoutChange(e) {
      if (this.selectWidget.type !== 'grid') return;
      const num = e ? 24 / e : 2;
      const n = this.selectWidget.columns.length;
      if (n > num) {
        this.selectWidget.columns.splice(num, n - num);
      } else if (n < num) {
        for (let i = 0; i < num - n; i++) {
          this.selectWidget.columns.push({ list: [] });
        }
      }
    },
    switchChange(e, prop) {
      if (this.selectWidget.type === 'select' && prop.key === 'multiple') {
        if (e) {
          this.$set(this.selectWidget, 'value', []);
        } else {
          this.$set(this.selectWidget, 'value', '');
        }
        EventBus.$emit('selectMultipleChange');
      }
      if (this.selectWidget.type === 'linkForm' && prop.key === 'isStatistics') {
        EventBus.$emit('changeLinkForm', this.selectWidget);
        const keyToFormula = _.cloneDeep(this.widgetData.config.keyToFormula);
        if (keyToFormula) {
          Object.keys(keyToFormula).forEach(fieldKey => {
            if (fieldKey.indexOf(`linkForm*${this.selectWidget.key}*`) >= 0) {
              formulaChange('remove', this.widgetData, this.selectWidget, fieldKey);
            }
          });
        }
        setLinkStatistics(this.selectWidget);
      }
    },
    changeSetting(e, prop, value) {
      if (prop.key !== 'title' && prop.key !== 'grid') {
        EventBus.$emit('formOptionsChange', { type: 'changeFieldPermission', data: _.cloneDeep(this.selectWidget), el: this.selectWidget });
      }
      if (prop.key === 'requireTitleRemark' && e === false) {
        value.titleRemarkWay = '';
        value.titleRemarkContent = '';
      }
    },
    statusCheck() {
      this.$emit('statusCheck');
    },
    inputChange(prop, value) {
      this.statusCheck();
      if (prop.key === 'name') {
        formulaChange('changeName', this.widgetData, this.selectWidget);
        EventBus.$emit('formOptionsChange', { type: 'changeName', data: _.cloneDeep(this.selectWidget), el: this.selectWidget });
      }
      if (prop.key === 'prefix' && this.selectWidget.type === 'workflowId' && value) {
        this.selectWidget.options.prefix = value.replace(/[^a-zA-Z]/ig, '');
      }
      if (prop.key === 'maxlength' && value) {
        this.selectWidget.options.maxlength = Number(value).toFixed(0);
        if (value < 0) this.selectWidget.options.maxlength = Math.abs(value);
        if ((this.selectWidget.type === 'input' || this.selectWidget.type === 'textarea') && this.selectWidget.value && this.selectWidget.value.length > value) {
          this.selectWidget.value = this.selectWidget.value.substr(0, value);
        }
      }
    },
    // 工具
    validateForm(validate = true) {
      return new Promise((resolve, reject) => {
        if (validate) {
          this.$refs.propFromRef.validate(valid => {
            if (valid) {
              resolve(valid);
            } else {
              reject();
            }
          });
        } else {
          resolve(true);
        }
      });
    },
    filterStatistics(list) {
      if (this.selectWidget.options.statistics.length) {
        const keys = list.map(i => i.key);
        this.selectWidget.options.statistics = this.selectWidget.options.statistics.filter(i => keys.includes(i));
      }
    },
    isSubFormAuth(prop) {
      if (this.selectWidget.isSubTable) {
        const keys = ['userAuth', 'userRead', 'setAuth'];
        return keys.includes(prop.key);
      }
      return false;
    },
    inputProps(prop) {
      if (prop.type !== 'numberRange' && prop.key !== 'precision') return true;
      if (isNumberType(this.selectWidget)) {
        return true;
      }
      return false;
    },
    numberInputChange(element) {
      if (isNumberType(element) && (element.value || element.value === 0)) {
        let minVal = -99999999999;
        let maxVal = 99999999999;
        if (element.options.numberRange) {
          minVal = element.options.numberRange[0] || element.options.numberRange[0] === 0 ? element.options.numberRange[0] : -99999999999;
          maxVal = element.options.numberRange[1] || element.options.numberRange[1] === 0 ? element.options.numberRange[1] : 99999999999;
        }
        if (Number(element.value) < minVal) element.value = minVal;
        if (Number(element.value) > maxVal) element.value = maxVal;

        const precision = element.options.precision;
        if (precision || precision === 0) {
          element.value = Number(Number(element.value).toFixed(precision));
        }
      }
    },
    inputNumberChange(prop) {
      if (prop.key === 'precision' && isNumberType(this.selectWidget)) {
        if (this.selectWidget.value) {
          const precision = this.selectWidget.options.precision;
          if (precision || precision === 0) {
            this.selectWidget.value = Number(Number(this.selectWidget.value).toFixed(precision));
          }
        }
      }
    },
    numberRangeChange() {
      if (this.selectWidget.type === 'input' && isNumberType(this.selectWidget)) {
        const numberRange = this.selectWidget.options.numberRange;
        if (!this.selectWidget.value && this.selectWidget.value !== 0) return;
        const val = Number(this.selectWidget.value);
        const precision = this.selectWidget.options.precision;
        if (val < numberRange[0]) {
          this.selectWidget.value = Number(Number(numberRange[0]).toFixed(precision));
        }
        if (val > numberRange[1]) {
          this.selectWidget.value = Number(Number(numberRange[1]).toFixed(precision));
        }
      }
    },
    inputValueChange(prop) {
      this.numberRangeChange();
      this.inputNumberChange(prop);
    },
    statisticsChange(e) {
      EventBus.$emit('subformStatisticsChange', e);
    },
    setDisabled(config, selectWidget) {
      // 字段内容缓存和字段加密互斥
      if (config.key === 'contentCache') return selectWidget.options.isSecret;
      // 只读与禁用互斥，即2个任意勾选一个另一个禁用
      const clashDisabled = config.key === 'disabled' && !!selectWidget.options.readonly;
      const clashReadonly = config.key === 'readonly' && !!selectWidget.options.disabled;
      return clashDisabled || clashReadonly;
    }
  }
};
</script>

<style lang="scss" scoped>
.width240 {
  width: 240px;
  &::v-deep {
    .el-input__inner {
      width: 240px;
    }
  }
}
.mb10 {
  margin-bottom: 10px;
}
.container {
  height: 100%;
}
.bottom-tip {
  color: #999;
  font-size: 12px;
  line-height: 1.5;
  margin-top: 5px;
}
.empty-container {
  margin-top: 133px;
  display: flex;
  flex-direction: column;
  align-items: center;
  .img {
    width: 120px;
    img {
      width: 100%;
    }
  }
  .label {
    color: #999;
    font-size: 14px;
    text-align: center;
  }
}
.flex-center {
  display: flex;
  align-items: center;
}
.input-number {
  &::v-deep {
    .el-input__inner {
      text-align: left;
      padding-left: 8px;
    }
    .el-input-number__increase,.el-input-number__decrease {
      background: #fff;
    }
  }
}
.other-setting-item {
  margin-top: 25px;
  &::v-deep {
    .el-form-item__label {
      font-weight: 550;
      color: #333333;
      font-size: 16px !important;
    }
  }
}
.props-config {
  height: 100%;
  &::v-deep {
    .el-form-item {
      margin-bottom: 15px;
    }
    .el-form-item__label {
      padding-bottom: 0;
    }
  }
}
.scroll-container {
  height: 100%;
}
.scroll {
  @include scrollBar($width: 6px);
}
.input-form-item {
  .label {
    color: #606266;
    font-size: 14px;
  }
}
</style>
